<!DOCTYPE html>
<html lang="zh">
    <head>
        <th:block th:include="include :: header('搜索自动补全')"/>
    </head>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
                        </div>
                        <div class="ibox-content">
                            <p>展示下拉菜单按钮。</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group">
                                        <input class="form-control" id="suggest-demo-1" type="text">
                                        <div class="input-group-btn">
                                            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                                    style="height: 31px" type="button">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <p>不展示下拉菜单按钮。</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group">
                                        <input class="form-control" id="suggest-demo-2" type="text">
                                        <div class="input-group-btn">
                                            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                                    type="button">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <p>前端json中获取数据</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group">
                                        <input class="form-control" id="suggest-demo-3" type="text">
                                        <div class="input-group-btn">
                                            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                                    style="height: 31px" type="button">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                            </div>

                            <h3>百度搜索</h3>
                            <p>支持逗号分隔多关键字</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group" style="width: 300px;">
                                        <input class="form-control" id="baidu" type="text">
                                        <div class="input-group-btn">
                                            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                                    style="height: 31px" type="button">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                            </div>

                            <h3>淘宝搜索</h3>
                            <p>支持逗号分隔多关键字</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-group" style="width: 400px;">
                                        <input class="form-control" id="taobao" type="text">
                                        <div class="input-group-btn">
                                            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"
                                                    style="height: 31px" type="button">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="form-group">
                                <label class="font-noraml">相关参数详细信息</label>
                                <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest"
                                        target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
                        </div>
                        <div class="ibox-content">
                            <p>通过数据属性的基本示例。</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <input class="form-control" data-provide="typeahead"
                                           data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]'
                                           placeholder="ruoyi..." type="text"/>
                                </div>
                            </div>
                            <hr>

                            <p>通过javascript的基本示例。</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <input class="form-control" id="typeahead-demo-1" placeholder="ruoyi..."
                                           type="text"/>
                                </div>
                            </div>

                            <hr>
                            <p>通过javascript的复杂示例。</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <input class="form-control" id="typeahead-demo-2" placeholder="ruoyi..."
                                           type="text"/>
                                </div>
                            </div>

                            <hr>
                            <p>后台url中获取简单数据</p>
                            <div class="row">
                                <div class="col-lg-6">
                                    <input class="form-control" id="typeahead-demo-3" placeholder="ruoyi..."
                                           type="text"/>
                                </div>
                            </div>

                            <hr>
                            <div class="form-group">
                                <label class="font-noraml">相关参数详细信息</label>
                                <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead"
                                        target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: bootstrap-suggest-js"/>
        <th:block th:include="include :: bootstrap-typeahead-js"/>
        <script type="text/javascript">

            var testBsSuggest = $("#suggest-demo-1").bsSuggest({
                url: ctx + "demo/form/userModel",
                idField: "userId",
                keyField: "userName"
            }).on('onDataRequestSuccess', function (e, result) {
                console.log('onDataRequestSuccess: ', result);
            }).on('onSetSelectValue', function (e, keyword) {
                console.log('onSetSelectValue: ', keyword);
            }).on('onUnsetSelectValue', function (e) {
                console.log("onUnsetSelectValue");
            });

            var testBsSuggest = $("#suggest-demo-2").bsSuggest({
                url: ctx + "demo/form/userModel",
                showBtn: false,
                idField: "userId",
                keyField: "userName"
            }).on('onDataRequestSuccess', function (e, result) {
                console.log('onDataRequestSuccess: ', result);
            }).on('onSetSelectValue', function (e, keyword) {
                console.log('onSetSelectValue: ', keyword);
            }).on('onUnsetSelectValue', function (e) {
                console.log("onUnsetSelectValue");
            });

            //data 数据中获取
            var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
                indexId: 1,
                indexKey: 2,
                data: {
                    'value': [
                        {
                            'userId': '1',
                            'userCode': '1000001',
                            'userName': '测试1',
                            'userPhone': '15888888888'
                        },
                        {
                            'userId': '2',
                            'userCode': '1000002',
                            'userName': '测试2',
                            'userPhone': '15888888888'
                        },
                        {
                            'userId': '3',
                            'userCode': '1000003',
                            'userName': '测试3',
                            'userPhone': '15888888888'
                        },
                        {
                            'userId': '4',
                            'userCode': '1000004',
                            'userName': '测试4',
                            'userPhone': '15888888888'
                        },
                        {
                            'userId': '5',
                            'userCode': '1000005',
                            'userName': '测试5',
                            'userPhone': '15888888888'
                        }
                    ],
                    'defaults': 'http://ruoyi.vip'
                }
            });

            //百度搜索测试
            var baiduBsSuggest = $("#baidu").bsSuggest({
                allowNoKeyword: false, //是否允许无关键字时请求数据
                multiWord: true, //以分隔符号分割的多关键字支持
                separator: ",", //多关键字支持时的分隔符，默认为空格
                getDataMethod: "url", //获取数据的方式，总是从 URL 获取
                url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
                /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
                jsonp: 'cb',
                /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
                processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                    var i, len, data = {
                        value: []
                    };
                    if (!json || !json.s || json.s.length === 0) {
                        return false;
                    }

                    console.log(json);
                    len = json.s.length;

                    jsonStr = "{'value':[";
                    for (i = 0; i < len; i++) {
                        data.value.push({
                            word: json.s[i]
                        });
                    }
                    data.defaults = 'baidu';

                    //字符串转化为 js 对象
                    return data;
                }
            });

            //淘宝搜索建议测试
            var taobaoBsSuggest = $("#taobao").bsSuggest({
                indexId: 2,                 // data.value 的第几个数据，作为input输入框的内容
                indexKey: 1,                // data.value 的第几个数据，作为input输入框的内容
                allowNoKeyword: false,      // 是否允许无关键字时请求数据
                hideOnSelect: true,         // 鼠标从列表单击选择了值时，是否隐藏选择列表
                multiWord: true,            // 以分隔符号分割的多关键字支持
                separator: ",",             // 多关键字支持时的分隔符，默认为空格
                getDataMethod: "url",       // 获取数据的方式，总是从 URL 获取
                effectiveFieldsAlias: {
                    Id: "序号",
                    Keyword: "关键字",
                    Count: "数量"
                },
                showHeader: true,
                url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
                /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
                jsonp: 'callback',
                /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
                processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                    var i, len, data = {
                        value: []
                    };

                    if (!json || !json.result || json.result.length == 0) {
                        return false;
                    }

                    console.log(json);
                    len = json.result.length;

                    for (i = 0; i < len; i++) {
                        data.value.push({
                            "Id": (i + 1),
                            "Keyword": json.result[i][0],
                            "Count": json.result[i][1]
                        });
                    }
                    console.log(data);
                    return data;
                }
            });

            $('#typeahead-demo-1').typeahead({
                source: ["ruoyi 1", "ruoyi 2", "ruoyi 3"]
            });

            $('#typeahead-demo-2').typeahead({
                source: [
                    {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
                    {"name": "Land Islands", "code": "AX", "ccn0": "050"},
                    {"name": "Albania", "code": "AL", "ccn0": "060"},
                    {"name": "Algeria", "code": "DZ", "ccn0": "070"}
                ]
            });

            $.get(ctx + "demo/form/collection", function (data) {
                $("#typeahead-demo-3").typeahead({
                    source: data.value
                });
            }, 'json');
        </script>
    </body>
</html>
